<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="~{ fragment/common::common_head}" />
    <style type="text/css">
        a:hover {
            color: #ca0c16 !important;
        }
    </style>
</head>
<body>

<!--导航-->
<div th:replace="~{ fragment/nav :: navbar}"></div>

<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <!--左边的卡片-->
        <div class="four wide column m-mobile-hide" style="max-width: 315px !important;padding-top: 0 !important;padding-right: 0 !important;">
            <div th:replace="~{ fragment/userinfo_sidebar::sidebar_userinfo}"></div>
            <!--归档-->
            <div th:replace="~{ fragment/userinfo_sidebar::sidebar_archives}"></div>
            <!--最新文章-->
            <div th:replace="~{ fragment/userinfo_sidebar::sidebar_newest_article}"></div>
            <!--分类-->
            <div th:replace="~{ fragment/userinfo_sidebar::sidebar_category}"></div>
            <h4 class="ui horizontal divider header m-margin-top-large">联系开发者</h4>
            <div class="ui centered card" style="width: 11em">
                <img src="../static/images/wechat.jpg" th:src="@{/static/images/wechat.jpg}" alt="" class="ui rounded image">
            </div>
        </div>

        <!--右边的分类内容-->
        <div class="twelve wide column" style="padding-top: 0 !important;">
            <!--分类的header-->
            <div class="ui top attached segment" style="border: none;border-radius: unset;border-bottom: #f0f1f2 3px solid;">
                <div class="ui middle aligned two column grid">
                    <div th:if="${author!=null}" class="ui  grid">
                        <div class="four row">
                            <div class="ui breadcrumb m-margin-left">
                                <a class="section" th:href="@{/article/index/{id}(id=${author.getUserId()})}" style="color: black">全部文章</a>
                                <i class="right angle icon divider"></i>
                                <span class="section" th:text="${date}">2019年6月</span>
                            </div>
                            <div class="m-margin-left-massive "><span style="color: #888888">排序：</span>
                                <span class="m-margin-right-bigger m-margin-left">
                                    <a href="#" th:if="${defaultOrderFlag==true}" style="color: #b52a1d" th:href="@{/archives/details/{uid}/{date}(uid=${author.getUserId()},date=${date})}">默认排序</a>
                                    <a href="#" th:if="${defaultOrderFlag==null}"  th:href="@{/archives/details/{uid}/{date}(uid=${author.getUserId()},date=${date})}" class="m-black">默认排序</a>
                                </span>
                                <span class="m-margin-right-bigger">
                                    <a href="#" th:if="${orderByUpdateTimeFlag==true}" style="color: #b52a1d" th:href="@{/archives/details/orderByUpdateTime/{uid}/{date}(uid=${author.getUserId()},date=${date})}">按更新时间</a>
                                    <a href="#" th:if="${orderByUpdateTimeFlag==null}" th:href="@{/archives/details/orderByUpdateTime/{uid}/{date}(uid=${author.getUserId()},date=${date})}" class="m-black">按更新时间</a>
                                </span>
                                <span class="m-margin-right-bigger">
                                    <a href="#" th:if="${orderByClickNumFlag==true}" style="color: #b52a1d" th:href="@{/archives/details/orderByClickNum/{uid}/{date}(uid=${author.getUserId()},date=${date})}">按访问量</a>
                                    <a href="#" th:if="${orderByClickNumFlag==null}" th:href="@{/archives/details/orderByClickNum/{uid}/{date}(uid=${author.getUserId()},date=${date})}"  class="m-black">按访问量</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ui top attached  segment" style="margin-top: 0;border: none;padding: 0;">
                <!--每个归档的文章-->
                <div th:if="${!#lists.isEmpty(articlePages)&&!#lists.isEmpty(articlePages.getList())}"
                     th:each="article:${articlePages.getList()}" class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear m-article-sidebar-padding" style="border-bottom: #f0f1f2 3px solid;">
                    <div class="ui mobile reversed stackable grid">
                        <div class="eleven wide column">
                            <div class="ui stackable  grid">
                                <div class="two wide column m-mobile-hide" style="max-width: 56px;padding-right: 0 !important;">
                                    <div th:if="${article.getArticleType() eq '0'}" class="ui red mini basic label">
                                        <span>原创</span>
                                    </div>
                                    <div th:if="${article.getArticleType() eq '1'}" class="ui green mini basic label">
                                        <span>转载</span>
                                    </div>
                                    <div th:if="${article.getArticleType() eq '2'}" class="ui blue mini basic label">
                                        <span>翻译</span>
                                    </div>
                                </div>
                                <div class="fourteen wide column" style="padding-top: 0px !important;padding-left: 10px !important;">
                                    <a href="#"  th:href="@{/article/details/{id}(id=${article.getArticleId()})}" th:text="${article.getArticleTopic()}" class="ui m-inline-block m-margin-top-small m-margin-bottom-small m-article-list-title"></a>
                                </div>
                            </div>
                            <p class="m-column_article_desc" th:text="${#strings.abbreviate(article.getArticleContent(),200)}">
                            </p>
                            <div class="ui stackable grid">
                                <div class="eleven wide column">
                                    <div class="ui mini horizontal link list">
                                        <div class="item" style="margin-left:0 !important;">
                                            <div th:if="${article.getArticleType() eq '0'}" class="ui red mini basic label m-mobile-show-only">
                                                <span>原创</span>
                                            </div>
                                            <div th:if="${article.getArticleType() eq '1'}" class="ui green mini basic label m-mobile-show-only">
                                                <span>转载</span>
                                            </div>
                                            <div th:if="${article.getArticleType() eq '2'}" class="ui blue mini basic label m-mobile-show-only">
                                                <span>翻译</span>
                                            </div>
                                        </div>
                                        <div class="item m-mobile-hide" style="margin-left: 0 !important;">
                                            <img th:src="${author.getUserHeaderImgUrl()}"
                                                 src="https://unsplash.it/100/100?image=1005" alt=""
                                                 class="ui avatar image m-mobile-hide">
                                            <div class="content"><a href="#" class="m-comment-font-user" th:text="${author.getUserNickname()}">黄鑫</a></div>
                                        </div>
                                        <div class="item m-margin-left">
                                            <i class="eye icon"></i> <span th:text="${article.getArticleClick()}">2342</span>
                                        </div>
                                        <div class="item m-margin-left">
                                            <i class="comment alternate icon"></i> <span th:text="${article.getArticleCommentNum()}">2342</span>
                                        </div>
                                        <div class="item m-margin-left" >
                                            <i class="calendar icon"></i> <span
                                                th:text="${#dates.format(article.getArticlePublishTime(),'yyyy年MM月dd  hh:mm:ss')}">2017-10-01</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="right aligned five wide column m-mobile-hide">
                                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin"
                                       th:text="${article.getArticleCategory()}" style="font-weight: 600">认知升级</a>
                                </div>
                            </div>
                        </div>
                        <div class="five wide column">
                            <a  target="_blank">
                                <a  href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin m-mobile-icon-show m-mobile-show-only"
                                   th:text="${article.getArticleCategory()}" style="background: rgba(0,0,0,.3) !important;border-color: rgba(0,0,0,.1) !important;">认知升级</a>
                                <img th:if="${article.getArticleFirstPicture()==null}" src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" th:alt="${article.getArticleTopic()}"  class="ui rounded image m-prev-image-style">
                                <img th:if="${article.getArticleFirstPicture()!=null}" th:src="@{${article.getArticleFirstPicture()}}" th:alt="${article.getArticleTopic()}"  class="ui rounded image m-prev-image-style">
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div th:if="${#lists.isEmpty(articlePages.getList())}" class="ui bottom attached segment"
                 style="border-top: none !important;">
                <div class="ui middle aligned two column grid">
                    <div style="color: grey;margin: 10em auto !important;float: left !important;font-size: 16px">
                        没有任何文章
                    </div>
                </div>
            </div>

            <!--分页按钮-->
            <div th:if="${articlePages.getTotal()>10}" class="ui bottom attached segment" style="border: none;border-top: #f0f1f2 3px solid;">
                <div class="ui middle aligned two column grid">
                    <div  style="margin: 5px auto;float: left !important;">
                        <div class="ui buttons">
                            <a th:if="${defaultOrderFlag==true}" th:href="@{/archives/details/{uid}/{date}(uid=${author.getUserId()},date=${date},page=${articlePages.getPrePage()})}" >
                                <button class="ui  button" style="background: white !important;font-weight: 100 !important;"><i class="step backward icon"></i>
                                </button>
                            </a>
                            <a th:if="${orderByUpdateTimeFlag==true}" th:href="@{/archives/details/orderByUpdateTime/{uid}/{date}(uid=${author.getUserId()},date=${date},page=${articlePages.getPrePage()})}" >
                                <button class="ui  button" style="background: white !important;font-weight: 100 !important;"><i class="step backward icon"></i>
                                </button>
                            </a>
                            <a th:if="${orderByClickNumFlag==true}" th:href="@{/archives/details/orderByClickNum/{uid}/{date}(uid=${author.getUserId()},date=${date},page=${articlePages.getPrePage()})}" >
                                <button class="ui labeled icon button" style="background: white !important;font-weight: 100 !important;"><i class="step backward icon"></i>
                                </button>
                            </a>
                            <!------------------------------------------------------->
                            <a  th:if="${defaultOrderFlag==true}" th:each="pageNo:${articlePages.getNavigatepageNums()}"
                                th:href="@{/archives/details/{uid}/{date}(uid=${author.getUserId()},date=${date},page=${pageNo})}">
                                <button  class="ui button pages" >
                                    [[${pageNo}]]
                                </button>
                            </a>
                            <a  th:if="${orderByUpdateTimeFlag==true}" th:each="pageNo:${articlePages.getNavigatepageNums()}"
                                th:href="@{/archives/details/orderByUpdateTime/{uid}/{date}(uid=${author.getUserId()},date=${date},page=${pageNo})}">
                                <button  class="ui button pages" >
                                    [[${pageNo}]]
                                </button>
                            </a>
                            <a  th:if="${orderByClickNumFlag==true}" th:each="pageNo:${articlePages.getNavigatepageNums()}"
                                th:href="@{/archives/details/orderByClickNum/{uid}/{date}(uid=${author.getUserId()},date=${date},page=${pageNo})}">
                                <button  class="ui button pages" >
                                    [[${pageNo}]]
                                </button>
                            </a>

                            <a th:if="${defaultOrderFlag==true}" th:href="@{/archives/details/{uid}/{date}(uid=${author.getUserId()},date=${date},page=${articlePages.getNextPage()})}">
                                <button class="ui right  button"
                                        style="background: white !important;font-weight: 100 !important;"> <i class="step forward icon"></i>
                                </button>
                            </a>
                            <a th:if="${orderByUpdateTimeFlag==true}" th:href="@{/archives/details/orderByUpdateTime/{uid}/{date}(uid=${author.getUserId()},date=${date},page=${articlePages.getNextPage()})}">
                                <button class="ui right  button"
                                        style="background: white !important;font-weight: 100 !important;"> <i class="step forward icon"></i>
                                </button>
                            </a>
                            <a th:if="${orderByClickNumFlag==true}" th:href="@{/archives/details/orderByClickNum/{uid}/{date}(uid=${author.getUserId()},date=${date},page=${articlePages.getNextPage()})}">
                                <button class="ui right labeled icon button"
                                        style="background: white !important;font-weight: 100 !important;">  <i class="step forward icon"></i>
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{fragment/common :: footbar}"></div>

</body>
<th:block th:replace="~{fragment/common :: common_js}"/>
<script>
    $('.m-article-sidebar-padding:last').css('border-bottom','none');
    $('#msg-btn').click(function () {
        $('.ui.modal').modal('hide');
    });
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    /*
         * 显示分页页码标识
         */
    function showCurrentPageNum() {
        if([[${articlePages eq null}]]) return;
        try{
            let obj = document.getElementsByClassName('pages');
            let page = [[${articlePages.pageNum}]];
            for (let i = 0; i < obj.length; i++) {
                if (obj[i].textContent == page) {
                    $(obj[i]).css("cssText", "background:#ddd !important");
                }
            }
        }catch (e) {
            console.log(e);
        }
    }
</script>

</html>